<template>
    <div class="p-6 bg-gray-50 min-h-screen">
        <div class="bg-white rounded-lg shadow p-6">
            <!-- 页面标题 -->
            <h1 class="text-2xl font-bold text-gray-800 mb-6">商家数据看板</h1>

            <!-- 选项卡切换 -->
            <el-tabs v-model="activeTab" type="card" @tab-change="handleTabChange">
                <el-tab-pane label="品类数据统计" name="category">
                    <CategoryStats />
                </el-tab-pane>
                <el-tab-pane label="单品数据统计" name="product">
                    <ProductStats />
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import CategoryStats from './CategoryStats.vue'
import ProductStats from './ProductStats.vue'

const activeTab = ref('category')

const handleTabChange = (tabName) => {
    console.log('切换到标签:', tabName)
}
</script>

<style scoped>
/* 自定义样式 */
:deep(.el-tabs__item) {
    padding: 0 20px;
    height: 40px;
    line-height: 40px;
}
</style>